import { Grid } from 'antd-mobile';
import constants from '../../../common/constants';
import './less/index.less';

const data = constants.menuItem;
class MenuItem extends React.Component{

    render(){
        return (
            <div>
                {/*<Grid data={data} isCarousel onClick={_el => console.log(_el)} hasLine={false}/>*/}
                <Grid data={data}
                      isCarousel
                      hasLine={false}
                      // style={{height:'330px',width:'100%',backgroundColor:'#F6F6F6'}}
                      // className="not-square-grid"
                      square={false}
                      columnNum={5}
                      renderItem={dataItem => (
                          <div style={{ padding: '12.5px',height:'80%'}}>
                              <a href={dataItem.url} ><img src={dataItem.icon} style={{ width: '80%', height: '80%'}} alt=""/></a>
                              <div style={{ color: '#000', fontSize: '18px', marginTop: '5px' }}>
                                  <span>{dataItem.text}</span>
                              </div>
                          </div>
                      )}
                />
            </div>
        );
    }
}
export default MenuItem;